<template>
    <el-form ref="loginForm" :model="loginFormData" status-icon :rules="commonRules" label-width="120px"
        class="demo-loginFormData">
        <!-- 用户名 -->
        <el-form-item label="用户名" prop="username" class="u-form-item">
            <el-input v-model="loginFormData.username" type="input" autocomplete="off" />
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label="密码" prop="password" class="u-form-item">
            <el-input v-model="loginFormData.password" type="password" autocomplete="off" />
        </el-form-item>
        <!-- 验证码 -->
        <el-form-item label="验证码" prop="captcha" class="c-form-item">
            <el-input v-model="loginFormData.captcha" @keydown.enter="submitForm(loginForm)" maxlength="5" />
            <span v-loading="loading" class="code" v-html="captcha" @click="getCaptcha"></span>
        </el-form-item>
        <el-form-item class="u-form-item">
            <el-button type="primary" @click="submitForm(loginForm)">登入</el-button>
        </el-form-item>
    </el-form>
</template>
<script setup>
import * as api from "@/api/users"
import { reactive, ref, onMounted } from 'vue'
import { loginApi, smsApi } from '../../api/users';
// 引入校验函数
import { commonRules, useSubmitForm } from "../../composition/login/validate"

// 引入loading动画加载框
import { ElLoading } from 'element-plus'

// 引入store
import { useUser } from "@/store/users"

// 引入路由对象
import { useRouter } from "vue-router"

// 使用路由对象
let router = useRouter()

// 使用store

let userStore = useUser()


// 控制loading的显示和隐藏

let loading = ref(true)


// 表单校验成功之后回调的方法
let validateSuccess = () => {
    // 发起登录请求


    // 1.登入请求之前要先校验验证码,将验证码统一小写
    verifyCaptcha(loginFormData.captcha.toLowerCase())

    console.log('校验成功');
}

// 表单校验失败之后回调的方法
let validateFailed = () => {
    console.log('校验失败');
}


// 使用useSubmitForm
let submitForm = useSubmitForm(validateSuccess, validateFailed)


const loginForm = ref()
// 注入到表单的数据
const loginFormData = reactive({
    username: '',
    password: '',
    captcha: '',
})

// 声明一个展示验证码的响应式变量
let captcha = ref()


// 获取验证码
let getCaptcha = async () => {
    // 一旦发起请求，就要打开loading动画
    loading.value = true
    let res = await api.getCaptchaApi()
    // 关闭加载动画
    loading.value = false
    if (res.data.state) captcha.value = res.data.img
}

// 校验验证码
// 1.本地的表单校验通过之后
// 2.通过接口校验验证码,一直要配置本地代理
// 声明loadingInstance，存储loading动画实例
let loadingInstance  = null
let verifyCaptcha = async captcha => {
      // 发起登录请求的时候就要加载loading加载动画框
   loadingInstance = ElLoading.service({
    text:'正在登入...',
    background:'rgba(0,0,0,.4)',
})
    try {
        // 表示验证码校验通过
        // 发起登入请求
        let res = await api.verifyCaptchaApi(captcha)
        login(loginFormData.username, loginFormData.password)
    } catch (e) {
        // 验证码校验失败了，需要重新刷新一下新的验证码
        console.log(e);
        getCaptcha()
        // 关闭loading加载动画框
        loadingInstance.close()
    }
}

// 用户名密码登录逻辑
/**
 * @param {String} username 用户名
 * @param {String} password 密码
 */
let login = async (username, password) => {
  
    // 调用登入请求的接口
    try {
        let res = await api.loginApi(username, password)
        // 存储token，存到sessionStorage中
        sessionStorage.setItem("myx-token", res.data.token)
        // 存储用户信息
        userStore.$patch(res.data.userInfo)
        // 登入成功需要跳转页面，跳到主页
        router.push("/")
        // 关掉加载动画框
        loadingInstance.close()
    } catch (e) {
        // 登入失败也要关闭加载动画框
        loadingInstance.close()
        console.log(e);
    }
}


// 首次页面记载调用
onMounted(() => {
    getCaptcha()
})
</script>

<style lang="scss" scoped>
.u-form-item {
    color: white !important;

    .el-input {
        width: 200px !important;
    }

    .el-button {
        width: 200px !important;

    }

    :deep(.el-form-item__label) {
        color: white
    }

    a {

        margin: 10px 0 0 55px;
    }


}

.c-form-item {
    .el-input {
        width: 100px !important;

    }

    :deep(.el-input__wrapper) {
        border-radius: 4px 0 0 4px;
    }

    :deep(.el-form-item__label) {
        color: white
    }

    .code {
        width: 100px;
        height: 32px;
        // border: 1px solid;
        background-color: white;
        border-radius: 0 4px 4px 0;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    :deep(.el-input__wrapper) {
        box-shadow: none;
    }
}

.loginOline {
    width: 400px;
    height: 550px;
    background-color: rgba(0, 0, 0, .3);
    position: fixed;
    right: 10%;
    top: 25%;


    h1 {
        padding: 90px 0 20px 0;
        text-align: center;
        color: white;
    }
}

.app {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
</style>
  

  